<template>
  <!-- 设备运行状态 -->
  <div class="allBox">
    <h1>设备运行状态</h1>
    <div class="allContent">
      <div class="rightOneBox">
        <div class="rightOneBoxL fl">
          <div v-if="JSON.stringify(data) !== '{}'" id="eqRunStatus" class="allWidthHeight" />
          <div v-else class="kong">暂无数据</div>
        </div>
        <div class="rightOneBoxR fl">
          <ul>
            <li>
              正常运行
              <b>
                <em>{{obj.normalNum}}</em>台
              </b>
            </li>
            <li>
              设备异常
              <b>
                <em>{{obj.pointNum}}</em>台
              </b>
            </li>
            <li>
              保养中
              <b>
                <em>{{obj.maintainNum}}</em>台
              </b>
            </li>
            <li>
              维修中
              <b>
                <em>{{obj.repairNum}}</em>台
              </b>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      obj: {},
      data: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* 获取设备运行状态 */
    async getEquipWorkStatus() {
      const res = await this.$axios.get('/board/composite/equipWorkStatus')
      if (res.data.code === 200) {
        this.data = res.data.data
        setTimeout(async () => {
          this.eqRunStatus(res.data.data)
        }, 500)
      }
    },
    /* 采购/销售统计echarts */
    eqRunStatus(data) {
      this.obj = data
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          left: '10%',
          center: 'center',
          orient: 'vertical',
          textStyle: {
            fontSize: 12, // 设置图例文字的大小
            color: '#fff'
          },
          itemWidth: 15, // 设置图例标记的图形宽度
          itemHeight: 15 // 设置图例标记的图形高度
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['70%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: (params) => {
                return `${data.equipNum}\n 共计`
              },
              // 标签位置在饼图的中心
              position: 'center',
              color: 'white',
              fontSize: '18px'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: data.normalNum,
                name: '正常运行',
                itemStyle: { color: '#31D6F6' }
              },
              {
                value: data.pointNum,
                name: '设备异常',
                itemStyle: { color: '#E32A86' }
              },
              {
                value: data.maintainNum,
                name: '保养中',
                itemStyle: { color: '#299CFC' }
              },
              {
                value: data.repairNum,
                name: '维修中',
                itemStyle: { color: '#6059FE' }
              }
            ]
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('eqRunStatus'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.rightOneBox {
  height: 100%;
  .rightOneBoxL {
    width: 65%;
    height: 100%;
  }
  .rightOneBoxR {
    width: 35%;
    // margin-right: 6%;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: left;
    align-items: center;
    ul {
      width: 80%;
      // height: 100px;

      li {
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        position: relative;
        b {
          position: absolute;
          right: 0;
          font-weight: normal;
          color: #f1f1f1;
          width: 50px;
          text-align: right;
          line-height: 24px;
          em {
            font-style: normal;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
